<template>
  <view :id="id" class="cm-img-wrapper" :style="[imgCommonStyle, cmStyle]" :class="[cmClass]">
    <!-- 加载中的图片 -->
    <image class="cm-img" v-if="preload && isLoading"
      :style="[imgCoverStyle]" :class="[imgClass]"
      :src="coverSrc" :mode="coverMode"
      @click="clickHandler"></image>
    <!-- 加载完成，正式显示的图片 -->
    <image class="cm-img"
      :style="[imgShowStyle]" :class="imgShowClass"
      :src="imgSrc" :mode="mode"
      @load="loadHandler"
      @error="errorHandler"
      @click="clickHandler">
    </image>
    
    <!-- 如果需要在图片上遮点啥，就用这个插槽 -->
    <slot></slot>
  </view>
</template>

<script src="./cm-img.js"></script>

<style lang="stylus">
@import './cm-img.styl'
</style>
